<template>
  <div class="warp">
    <Input v-model:value="state" />
    <Button class="btn" type="primary" @click="handleOpen">设置坐标</Button>
    <ModalMap :visible="visible" @register="registerModal" @ok="handleOk" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref } from 'vue';
  import { Input, Button } from 'ant-design-vue';
  import ModalMap from '@/components/ModalMap/index.vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { propTypes } from '@/utils/propTypes';
  import { useModal } from '@/components/Modal';
  import { useRuleFormItem } from '@/hooks/component/useFormItem';

  export default defineComponent({
    name: 'ApiSelect',
    components: {
      Input,
      Button,
      ModalMap,
    },
    props: {
      value: [Array, Object, String, Number],
      // api params
      params: {
        type: Object as PropType<Recordable>,
        default: () => ({}),
      },
      // support xxx.xxx.xx
      resultField: propTypes.string.def(''),
      alwaysLoad: propTypes.bool.def(false),
    },
    setup(props) {
      const loading = ref(false);
      const { t } = useI18n();
      // const state = ref();
      const emitData = ref<any[]>([]);

      const visible = ref(false);
      const [state] = useRuleFormItem(props, 'value', 'change', emitData);

      console.log('state--->', state);

      const [registerModal, { openModal, getVisible }] = useModal();

      const handleOpen = () => {
        visible.value = true;
        openModal(true);
      };

      const handleOk = (data) => {
        console.log('data--->', data);
        // emitData.value = [data];
        // state.value = data.address;
        // console.log('state.value--->', state.value);
        // visible.value = false;
      };

      // Embedded in the form, just use the hook binding to perform form verification
      return {
        state,
        loading,
        visible,
        t,
        registerModal,
        handleOpen,
        getVisible,
        handleOk,
      };
    },
  });
</script>

<style lang="less" scoped>
  .warp {
    display: flex;
    .btn {
      margin-left: 10px;
    }
  }
</style>
